import {message, Modal, notification, Upload, type UploadFile} from "antd";
import {forwardRef, useCallback, useImperativeHandle, useState} from "react";
import {download, getToken} from "@/utils";
import {CloudUploadOutlined} from "@ant-design/icons";
import style from '@/styles/components/import.module.scss'
import {systemApi} from "@/services/system.ts";

const {Dragger} = Upload

type ImportTemplatePropsType = {
    title: string
    template: string
    fileName: string
    action: string
    getList: () => void
}


const iconStyle = {
    fontSize: '100px'
}

const headers = {
    Authorization: getToken()!
}


export const ImportTemplate = forwardRef((props: ImportTemplatePropsType, ref) => {

    const [messageApi, contextHolder] = message.useMessage();

    const [open, setOpen] = useState<boolean>(false)

    const [loading, setLoading] = useState<boolean>(false)

    const handleOk = useCallback(() => {

    }, [])

    const handleCancel = useCallback(() => {
        setOpen(false)
    }, [])

    useImperativeHandle(ref,() => ({
        // 控制 Modal 打开
        showModal: () => {
            setOpen(true)
            setLoading(true)
            setTimeout(() => {
                setLoading(false)
            }, 1000)
        },
        // 控制 Modal 关闭
        hideModal: () => {
            setOpen(false)
        },
    }))
    // 下载
    const handleDownload = () => {
        systemApi.downloadImportTemplate(props.template).then(res => {
            download(res, props.fileName)
        })
    }

    // 导入
    const handleChange = ({file}: {file: UploadFile}) => {
       if (file.status === 'done') {
           if (file.response.code === 200) {
               messageApi.success(file.response.msg)
               setOpen(false)
               props.getList()
           } else {
               //

               notification.error({
                   message: file.response.msg,
                   duration: 10,
                   showProgress: true,
               })
           }

       }
    }

    return (
        <Modal
            title={props.title}
            open={open}
            onOk={handleOk}
            onCancel={handleCancel}
            maskClosable={false}
            keyboard={false}
            loading={loading}
            footer={null}
            centered
        >
            <div className={style.box}>
                {contextHolder}
                <Dragger
                    headers={headers}
                    name={'file'}
                    action={props.action}
                    accept={'.xlsx,.xls'}
                    onChange={handleChange}
                >
                    <p>
                        <CloudUploadOutlined style={iconStyle} />
                    </p>
                    <p className={style.text}>将文件拖到此处，或<span>点击上传</span></p>
                </Dragger>
                <br/>
                <div className={style.download}>
                    仅允许导入xls、xlsx格式文件。<span onClick={handleDownload}>下载模板</span>
                </div>
            </div>
        </Modal>
    )
})